<template>
  <div class='navbar'>
    <div class="back" @click="$router.back()" v-if="showBack">
      <i class="iconfont">&#xe604;</i>
    </div>
    <div class="title">{{$route.meta.title}}</div>
    <div class="more">
      <i class="iconfont">&#xe605;</i>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Navbar',
  data() {
    return {}
  },
  computed: {
    showBack() {
      return !this.$route.meta?.canotBack
    },
  },
}
</script>

<style lang='less' scoped>
  @font-face {
    font-family: 'iconfont';  /* Project id 2946634 */
    src: url('//at.alicdn.com/t/font_2946634_n5oiin32rt8.woff2?t=1637216735961') format('woff2'),
        url('//at.alicdn.com/t/font_2946634_n5oiin32rt8.woff?t=1637216735961') format('woff'),
        url('//at.alicdn.com/t/font_2946634_n5oiin32rt8.ttf?t=1637216735961') format('truetype');
  }
  .iconfont{
    font-family:"iconfont" !important;
    font-size:24px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
  }

  .navbar {
    display: flex;
    height: 80px;
    padding: 0 12px;
    align-items: center;

    .title {
      flex: 1;
      text-align: center;
    }
  }
</style>
